<template>
  <div class="divBox relative">
    <el-card class="box-card">
      <div slot="header" class="clearfix">


<!--        <router-link :to=" { path:'/design/list/creatPorcelainArea' } ">-->
          <el-button size="small" type="primary" class="mr10" v-hasPermi="['admin:porcelainArea:save']" @click="showDig(null)">添加金刚区
          </el-button>

        &nbsp;&nbsp;&nbsp;
          <el-checkbox v-model="isShow" @change="filterByIsShow">过滤掉不显示的</el-checkbox>
        <!--        </router-link>-->
      </div>

      <div style="width: 800px;margin: auto;text-align: center">
        <el-row :gutter="12">
          <el-col :span="6" v-for="(item, index) in tableData.data" :key="item.id"
                  style="margin-top: 15px;cursor: pointer"
          >
            <div @click="showDig(item)">
              <el-card :body-style="{ padding: '20px 0 0 0' }" shadow="hover" >
                <el-avatar :size="100"
                           :src="item.imgUrl"
                           
                ></el-avatar>
                <div style="padding: 14px;font-size: 14px">
<!--                  <span v-if="item.type === 20" style="color: blue">{{ item.name }}</span>
                  <span v-if="item.type === 30" style="color: #ff4949">{{ item.name }}</span>
                  <span v-if="item.type === 10">{{ item.name }}</span>-->
                  <span v-if="item.isShow === 0" style="color: red">(不显示)</span>
                  {{ item.name }}
                  <i v-if="item.type !== 1" class="el-icon-lock" style="color: red"></i>
                  <div class="bottom clearfix">
                    <!--                      <time class="time">111</time>-->
                    <!--                      <el-button type="text" class="button" size="mini">编辑</el-button>-->
                  </div>
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-dialog
      title="新增/编辑"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >

      <div class="components-container">
        <el-form ref="pram" label-width="150px" :model="pram">
          <el-form-item label="文案："  prop="name" :rules="[{required:true, message:'请填写', trigger:['blur','change']}]">
            <el-input v-model="pram.name" placeholder="请输入显示文案" size="small" clearable>
            </el-input>
          </el-form-item>


          <el-form-item label="跳转类型：" prop="type" :rules="[{required:true, message:'请选择', trigger:['blur','change']}]">
              <el-select v-model="pram.type" placeholder="请选择" @change="jumpTypesChange">
                  <el-option
                    v-for="item in jumpTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>

            </el-form-item>

          <el-form-item label="请选择商品分类：" v-if="pram.type === 1" :rules="[{required:true, message:'请选择', trigger:['blur','change']}]">
            <el-cascader v-model="pram.cateId" :options="merCateList" :props="props" clearable class="mr20" size="small"/>
          </el-form-item>


          <el-form-item label="请选择专区：" v-if="pram.type === 5" :rules="[{required:true, message:'请选择', trigger:['blur','change']}]">
              <el-select v-model="pram.specialZone" placeholder="请选择">
                  <el-option
                    v-for="item in positions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>

            </el-form-item>

            <el-form-item label="请填写页面地址：" v-if="pram.type === 10" :rules="[{required:true, message:'请选择', trigger:['blur','change']}]">
            <el-input v-model="pram.pagePath" placeholder="填写小程序页面地址" size="small" clearable>
            </el-input>
          </el-form-item>

          <el-form-item label="图片：" prop="imgUrl" :rules="[{required:true, message:'请上传图片', trigger:['blur','change']}]">
            <div class="upLoadPicBox" @click="modalPicTap('1')" >
              <div v-if="pram.imgUrl" class="pictrue"><img :src="pram.imgUrl"></div>
              <div v-else class="upLoad">
                <i class="el-icon-camera cameraIconfont" />
              </div>
            </div>
          </el-form-item>

          <el-form-item label="顺序号：">
            <el-input v-model="pram.sort" placeholder="请输入顺序号" type="number" size="small" clearable>
            </el-input>
          </el-form-item>

          <el-form-item label="是否显示">
            <el-switch v-model="pram.isShow" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" :loading="loading"  @click="handerSubmit('pram')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  porcelainAreaApi,
  jingangAreaApi,
  porcelainAreaDeleteApi,
  productExcelApi,
  cpDisplayApi,
  cpHideApi
} from '@/api/pagemanagement'
import { getToken } from '@/utils/auth'
import { checkPermi } from '@/utils/permission'
import { Debounce } from '@/utils/validate'
import { categoryApi } from '@/api/store'
import * as pageManApi from '@/api/pagemanagement' // 权限判断函数
export default {
  name: 'BannerList',
  components: {},
  data() {
    return {
      isShow: true,
      pram: {},
      props: {
        children: 'child',
        label: 'name',
        value: 'id',
        emitPath: false,
        checkStrictly: true

      },
      // roterPre: roterPre,
      headeNum: [],
      listLoading: true,
      tableData: {
        data: []
      },

      jumpTypes: [{
            value: 1,
            label: '商品分类'
          }, {
            value: 5,
            label: '推荐专区'
          },{
            value: 10,
            label: '前端页面'
          }],
          positions: [{
            value: 'superiorProductsRecommend',
            label: '优品推荐'
          }, {
            value: 'recommendedForYou',
            label: '为你推荐'
          },{
            value: 'hotProducts',
            label: '火热爆品'
          },{
            value: 'specialOfferZone',
            label: '特惠专区'
          }],
      tableFrom: {
        position: '1'
      },
      categoryList: [],
      merCateList: [],
      objectUrl: process.env.VUE_APP_BASE_API,
      dialogVisible: false,
      loading:false,
      allData: [],
    }
  },
  mounted() {
    this.getList()
    this.getCategorySelect()
    this.checkedCities = this.$cache.local.has('goods_stroge') ? this.$cache.local.getJSON('goods_stroge') : this.checkedCities
  },
  methods: {
    filterByIsShow(){
      let array = [];
      this.allData.forEach(e => {
        if(this.isShow && e.isShow === 1){
          array.push(e);
        }
        if(!this.isShow){
          array.push(e);
        }
      })
      this.tableData.data = array
    },
    // 商户分类；
    getCategorySelect() {
      categoryApi({ status: -1, type: 1 }).then(res => {
        this.merCateList = res
      }).catch(res => {
        this.$message.error(res.message)
      })
    },
    showDig(data){
      console.log('545454545')
      console.log(data)
      if(!data){
        this.pram = {
          isShow: 0,
          id: null,
          imgUrl:null,
          type: 1
        };
      } else {
        this.pram = data
      }
     
      console.log('this.pram', this.pram);
      this.dialogVisible = true
    },

    jumpTypesChange(e){
      console.log(e)
      this.pram.type = e
    
    },
    cateChange(e){
      console.log(e)
    },
    // 图片上传
    modalPicTap (tit, num, i,status) {
      const _this = this;
      if(_this.isDisabled) return;
      this.$modalUpload(function(img) {
        if(tit==='1'&& !num){
          _this.pram.imgUrl = img[0].sattDir

        }
      },tit, 'content')
    },
    handerSubmit:Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (!valid) return
        this.handlerSave();
      })
    }),
    handlerSave() {
      this.loading = true
      console.log(this.pram)
      if(this.pram.cateId == null && this.pram.specialZone == null && this.pram.pagePath == null){
        this.$message.warning('必填项不能为空！');
        return;
      }

      pageManApi.SaveJInggangArea(this.pram).then(data => {
        this.$message.success('操作成功')
        this.loading = false
        this.dialogVisible = false
        // this.getList()
        this.$router.go(0)
        // this.$router.push({ path: '/design/porcelainArea' });
      }).catch(()=>{
        this.loading = false
      })
    },
    checkPermi,
    seachList() {
      this.getList()
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleCloseMod(item) {
      this.dialogVisible = item
      this.getList()
    },
    // 复制
    onCopy() {
      this.dialogVisible = true
    },
    // 导出
    exports() {
      productExcelApi({
        cateId: this.tableFrom.cateId,
        keywords: this.tableFrom.keywords,
        type: this.tableFrom.type
      }).then((res) => {
        window.location.href = res.fileName
      })
    },
    // 列表
    getList() {
      this.listLoading = true
      jingangAreaApi().then(res => {
        this.tableData.data = res
        this.listLoading = false
        this.allData = res

        this.filterByIsShow()
      }).catch(res => {
        this.listLoading = false
        this.$message.error(res.message)
      })
    },
    pageChange(page) {
      this.tableFrom.page = page
      this.getList()
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val
      this.getList()
    },
    // 删除
    handleDelete(id, type) {
      this.$modalSure(`删除 id 为 ${id} 的瓷片区`).then(() => {
        porcelainAreaDeleteApi(id).then(() => {
          this.$message.success('删除成功')
          this.getList()
        })
      })
    },
    onchangeIsShow(row) {
      row.isShow
        ? cpDisplayApi(row.id).then(() => {
          this.$message.success('显示成功')
          this.getList()
        }).catch(() => {
          row.isShow = !row.isShow
        }) : cpHideApi(row.id).then(() => {
          this.$message.success('隐藏成功')
          this.getList()
        }).catch(() => {
          row.isShow = !row.isShow
        })
    }

  }
}
</script>

<style scoped lang="scss">
.el-table__body {
  width: 100%;
  table-layout: fixed !important;
}

.taoBaoModal {
  //  z-index: 3333 !important;
}

.demo-table-expand {
  ::v-deep  label {
    width: 82px;
  }
}

.demo-table-expand {
  ::v-deep  .el-form-item__content {
    width: 77%;
  }
}

.selWidth {
  width: 350px !important;
}

.seachTiele {
  line-height: 30px;
}

.relative {
  position: relative;
}
.selWidth .el-input--small .el-input__inner{
  width: auto !important;
}

</style>
